<template>
<div style="display: flex">
  <div :style="{width:(isCollapse ? '64px' : '208px')}">
    <el-menu
        background-color="#ffffff"
        style="width: 100%;height: 100%"
        text-color="#000"
        unique-opened
        router
        :collapse="isCollapse"
        :collapse-transition="false">
      <el-row style="padding-top: 10px;">
        <el-col :span="2"></el-col>
        <el-col :span="7" style="padding-left: 7px;">
          <!-- el-avatar是el的头像组件,可以把图片切成圆形 -->
          <el-avatar src="/avatar.png" style="width: 35px;height: 35px;"></el-avatar>
        </el-col>
        <el-col :span="isCollapse ? 0 : 13">
            <span style="color:#3c82f5;font-weight:bold;position:relative;top:8px;left:2px;">
              达外搜索
            </span>
        </el-col>
      </el-row>
    </el-menu>
    <el-button type="primary">开启新会话</el-button>
    <div style="position: fixed;left: 45px;bottom: 70px">
      <el-input placeholder="下载此软件" style="width:100px"></el-input>
    </div>
    <el-icon style="position: fixed;left: 35px;bottom: 35px"><User /></el-icon>
    <el-dropdown style="position: fixed;left: 55px;bottom: 35px">
    <span class="el-dropdown-link">
      个人信息
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <div style="position: fixed;left: 40%;top: 40%;">
    <h3>我是小三，很高兴见到你</h3>
    <el-input placeholder="给小三发消息吧" style="width: 400px;height: 50px;" v-model="inpute" @change="ifcom" ></el-input>
  </div>
</div>
</template>

<script setup>
import {ref} from "vue";

const isCollapse = ref(false);
const inpute = ref();
const ifcom = () => {
  if (inpute.value !== null) {
    alert("我找不到");
  } else {
    alert("请输入信息");
  }
}
</script>